.emoji-picker-icon {
	cursor: pointer;

	font-size: 18px;

	&--disabled {
		cursor: default;

		color: var(--message-box-container-border-color);
	}

	&::before {
		transition: transform 0.2s ease;
	}

	&:hover {
		&::before {
			transform: scale(1.2);
		}
	}
}

.emoji-picker {
	position: absolute;
	z-index: 100;

	display: none;

	width: 365px;
	max-width: 100%;

	height: 300px;

	margin-right: 22px;

	padding-bottom: 0;

	white-space: initial;

	opacity: 1;

	background-color: rgba(255, 255, 255, 0.98);

	&.show {
		display: flex;
	}

	& .filter-list {
		display: flex;

		width: 100%;
		padding: 0 5px;
	}

	& .filter-item {
		display: flex;

		padding: 6px 0;

		border-width: 0 0 2px;
		border-style: solid;
		flex-grow: 1;
		justify-content: center;

		& .category-icon {
			font-size: 20px;
		}
	}

	& .current-category-header {
		padding: 3px 5px;
	}

	& .emojis {
		position: relative;

		overflow-y: auto;

		flex: 1;

		padding: 3px 0 0 2px;

		& .emoji-list {
			margin: 0.5em 0;

			& li.emoji-picker-item {
				display: inline-block;

				margin: 2px;
				padding: 4px 2px 2px;

				cursor: pointer;
				transition: transform 0.2s ease;

				border-radius: 4px;

				&:hover {
					transform: scale(1.2);

					background-color: #dddddd;
				}
			}

			&.visible {
				display: block;
			}
		}
	}

	& .rc-input__icon {
		left: 0.5rem;
	}
}

.emoji-footer {
	padding: 0.4rem;

	text-align: center;

	color: var(--rc-color-primary-light);

	font-size: 12px;

	font-weight: 500;

	& .add-custom {
		display: inline-block;

		width: 100%;
	}
}

.emoji-top {
	display: flex;

	align-items: center;

	& .rc-input {
		margin: 0 0.3rem;
	}

	& .emoji-filter {
		position: relative;

		width: 90%;
		margin-bottom: 0;

		& .search {
			position: relative;

			width: 100%;
			height: 35px;
			padding: 0.5rem 1rem 0.5rem 2.25rem;

			border-width: 1px;
			border-style: solid;
			border-radius: 5px;
			outline: none;

			line-height: normal;
			appearance: none;
		}

		& .icon-search {
			position: absolute;
			top: 10px;
			left: 7px;
		}
	}

	& .change-tone {
		position: relative;

		display: flex;

		width: 10%;
		justify-content: center;

		& a {
			position: relative;
			z-index: 10;
		}

		& .current-tone {
			display: block;

			width: 20px;
			height: 20px;

			border-radius: 10px;
		}

		& .tone-selector {
			position: absolute;
			z-index: 1;
			top: 25px;

			visibility: hidden;

			padding: 4px 2px;

			transition: transform 0.2s ease, visibility 0.2s ease, opacity 0.2s ease;
			transform: translateY(-20px);

			opacity: 0;
			border-radius: 4px;
			box-shadow:
				0 1px 1px 0 rgba(0, 0, 0, 0.2),
				0 2px 10px 0 rgba(0, 0, 0, 0.16);

			&.show {
				display: block;
				visibility: visible;

				transform: translateY(0);

				opacity: 1;
			}

			& li {
				display: block;

				padding: 0 4px;
			}

			& span {
				display: inline-block;

				width: 20px;
				height: 20px;

				transition: transform 0.2s ease;

				border-radius: 10px;
			}
		}

		& .tone-0 {
			background-color: #ffcf11;
		}

		& .tone-1 {
			background-color: #fae3c3;
		}

		& .tone-2 {
			background-color: #e2cfa1;
		}

		& .tone-3 {
			background-color: #dba373;
		}

		& .tone-4 {
			background-color: #a88054;
		}

		& .tone-5 {
			background-color: #5f4e43;
		}
	}
}

.emoji {
	position: relative;

	display: inline-block;
	overflow: hidden;

	width: 22px;
	height: 22px;
	margin: 0 0.15em;

	vertical-align: middle;
	white-space: nowrap;
	text-indent: 100%;

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	font-size: inherit;
	line-height: normal;
	image-rendering: auto;
}

.emoji.big {
	width: 44px;
	height: 44px;
}
